import React from 'react';
import { Row, Col, Table, Button, Form, Input, Alert, Icon, Spin, Modal, Select} from 'antd';
import Axios from '../../assets/js/axios'
import {connect} from 'react-redux'
const FormItem = Form.Item;
const Option = Select.Option;

class GasUser extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            isShowGasUserSearch: false,
            data: [],
            visibility: false,
            alertInfo: {},
            loading: true
        }
    }

    params = {
        page: 1,
        cityInfo: {}
    }

    componentWillMount() {
        this.mounted = true
        //初始化获取数据
        this.getUserList()
        if(this.mounted) {
            if(Object.keys(this.props.info).length) {
                this.setState({
                    visibility: true,
                    alertInfo: this.props.info
                })
            }
        }
    }

    //获取数据
    getUserList = (obj = {}) => {
        Axios.requestList(this,'/api/gasUsers/queryGasUsersByCondition', 'get', this.params, obj )
    }
    
    //查询方法
    filterUserSubmit = () => {
        this.params.cityInfo = this.cityForm.props.form.getFieldsValue();
        this.params.page = 1
        this.getUserList(this.params.cityInfo)
    }

    //查询重置方法
    filterUserReset = () => {
        this.params.page = 1
        this.getUserList()
        this.cityForm.props.form.resetFields();
    }

    //模态框显示
    showUserModal = ()=> {
        if(this.mounted) {
            this.setState({
                isShowGasUserSearch: true
            })
        }
    }

    //高级搜索

    handleGasUserSubmit = () => {
        this.params.cityInfo = this.cityForm.props.form.getFieldsValue();
        this.params.page = 1
        this.getUserList(this.params.cityInfo)
        this.setState({
            isShowGasUserSearch: false
        })
    }

    gasUserUpdate = () => {
        this.setState({
            loading: true
        });
        Axios.ajax({
            url: '/api/gasUsers/getGasData',
            methods: 'post'
        }).then((res) => {
            if(this.mounted) {
                this.setState({
                    loading: false,
                    visibility: true,
                    alertInfo: res
                })
            }
        })
    }

    onClose = (e) => {
        if(this.mounted) {
            this.setState({
                visibility: false
            })
        }
    }

    componentWillUnmount() {
        this.mounted = false
    }

    render() {
            const columns = [
                {
                    title: '用户姓名',
                    dataIndex: 'user_name'
                },
                {
                    title: '用户编号',
                    dataIndex: 'user_id'
                },
                {
                    title: '用户地址',
                    dataIndex: 'user_address'
                },
                {
                    title: '用户类型',
                    dataIndex: 'user_type',
                },
                {
                    title: '抄表周期',
                    dataIndex: 'meter_month',
                },
                {
                    title: '燃气表号',
                    dataIndex: 'meter_id',
                    width: 180
                }
            ]
        return (
            <div>
                {
                    this.state.visibility ? <div className="alert"><Alert {...this.state.alertInfo}></Alert> <Icon onClick={this.onClose} type="close" /> </div> : null
                }
                <Row>
                    <FilterForm 
                        wrappedComponentRef={(inst) => {this.cityForm = inst;}} 
                        filterReset={() => {this.filterUserReset()}} 
                        filterSubmit={() => {this.filterUserSubmit()}}
                        gasUserUpdate={() => {this.gasUserUpdate()}}
                        showModal={() => {this.showUserModal()}}
                        />
                </Row>
                <Modal title="高级搜索" visible={this.state.isShowGasUserSearch} onCancel={() => {
                    this.setState({
                        isShowGasUserSearch: false
                    })
                }}
                onOk={() => {this.handleGasUserSubmit()}}
                >
                    <OpenUserSearch wrappedComponentRef={(inst) => {this.cityForm = inst;}}/>
                </Modal>
                <Row>
                    <Spin spinning={this.state.loading} tip="加载中。。。">
                        <Table bordered 
                            columns={columns} 
                            dataSource={this.state.data}
                            pagination = {this.state.totalRecord < 21 ? false : this.state.pagination}
                            locale={{emptyText: '暂无数据'}}
                        />
                    </Spin>
                </Row>
            </div>
        );
    }
}

const mapStateToProps = state => {
    return {
        info: state.info
    }
}

export default connect(mapStateToProps)(GasUser);

//查询列表
class  FilterForm extends React.Component {
    handleUserSubmit = () => {
        this.props.filterSubmit();
    }

    handleUserReset = () => {
        this.props.filterReset();
    }

    handleGasUserUpdate = () => {
        this.props.gasUserUpdate();
    }

    showModal = () => {
        this.props.showModal();
    }

    render() {
        const {getFieldDecorator} = this.props.form;
        return (
            <Form>
                <Col span={5}>
                    <FormItem>
                        {
                            getFieldDecorator('key')(
                                <Input autoComplete="off" placeholder="请输入用户姓名或者编号" />
                            )
                        }
                    </FormItem>
                </Col>
                <Col span={19}>
                    <FormItem>
                        <Button type="primary" onClick={() => {this.handleUserSubmit()}} style={{marginLeft: 20}}>搜索</Button>
                        <Button type="primary" onClick={() => {this.handleUserReset()}} style={{margin: '0 20px'}}>刷新</Button>
                        <Button type="primary" onClick={() => {this.showModal()}}>高级搜索</Button>
                        <Button type="primary" onClick={() => {this.handleGasUserUpdate()}} style={{margin: '0 20px'}}>更新用户信息</Button>
                    </FormItem>
                </Col>
            </Form>
        )
    }
}
FilterForm = Form.create({})(FilterForm);

class OpenUserSearch extends React.Component {
    render() {
        const formItemLayout = {
            labelCol: {
                span: 5
            },
            wrapperCol: {
                span: 19
            }
        }
        const {getFieldDecorator} = this.props.form
        return (
            <Form layout="horizontal">
                <FormItem label="用户地址" {...formItemLayout}>
                    {
                        getFieldDecorator('user_address', {
                        })(
                            <Input autoComplete="off" placeholder="请输入用户地址" />
                        )
                    }
                </FormItem>
                <FormItem label="表具编号" {...formItemLayout}>
                    {
                        getFieldDecorator('meter_id', {
                        })(
                            <Input autoComplete="off" placeholder="请输入用户编号" />
                        )
                    }
                </FormItem>
                <FormItem label="抄表周期" {...formItemLayout}>
                    {
                        getFieldDecorator('meter_type', {
                            initialValue: "0"
                        })(
                            <Select>
                                <Option value="0">请选择</Option>
                                <Option value="单月">单月</Option>
                                <Option value="双月">双月</Option>
                            </Select>
                        )
                    }
                </FormItem>
            </Form>
        )
    }
}
OpenUserSearch = Form.create({})(OpenUserSearch);